<template>
  <div class="resetpd-main">
    <!-- 正在修改密码 -->
    <div class="div1" v-if="!isSuccessReset">
      <van-cell-group>
        <van-field
          v-model="password"
          ref="passwordRef"
          label="新密码："
          placeholder="请输入六位数字密码"
          @click="isKebordShow = true"
          readonly
        />
      </van-cell-group>
      <div class="button">
        <van-button
          type="default"
          size="small"
          color="orange"
          :loading="resetLoading"
          :disabled="!isCompleteInput"
          @click="submitResetPassword"
        >
          确认
        </van-button>
        <van-button type="default" size="small" @click="goback"
          >取消</van-button
        >
      </div>
      <!-- 数字键盘 -->
      <van-number-keyboard
        :class="isCompleteInput ? '' : 'disabled'"
        v-model="password"
        :show="isKebordShow"
        theme="custom"
        close-button-text="完成"
        :maxlength="6"
        @blur="isKebordShow = false"
        @input="onInput"
        @close="handleClose"
      />
    </div>
    <!-- 成功修改密码 -->
    <div class="div2" v-if="isSuccessReset">
      <van-icon name="checked" color="green" />
      <p>修改密码成功</p>
      <van-button @click="goback">返回</van-button>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { mapGetters } from "vuex";
import { Field, NumberKeyboard, Button, Icon } from "vant";
Vue.use(Field);
Vue.use(NumberKeyboard);
Vue.use(Button);
Vue.use(Icon);

export default {
  name: "ResetPassword",
  head() {
    return {
      title: "支付密码设置"
    };
  },
  data() {
    return {
      password: "",
      isKebordShow: false,
      isSuccessReset: false, // 是否成功修改了密码
      isCompleteInput: false, // 是否完成了输入
      resetLoading: false
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo",
      payPasswordInfo: "authen/payPasswordInfo"
    })
  },
  watch: {
    password(val) {
      if (val && val.length === 6) {
        this.isCompleteInput = true;
      } else {
        this.isCompleteInput = false;
      }
    }
  },
  methods: {
    // 点击按键时
    onInput(keyVal) {
      console.log(keyVal);
      this.$refs.passwordRef.blur(); // 让输入框失焦
    },
    handleClose() {
      this.isKebordShow = false;
    },

    // 确认修改密码
    submitResetPassword() {
      this.resetLoading = true;
      const { enterpriseId, ids, isFree, mobilePhone } = this.payPasswordInfo;
      this.$axios
        .$post("/update", {
          enterpriseId: enterpriseId,
          ids: ids,
          isFree: isFree,
          mobilePhone: mobilePhone,
          payPassword: this.password
        })
        .then(res => {
          this.resetLoading = false;
          if (res.retCode === 0) {
            this.isSuccessReset = true;
          } else {
            alert(res.message);
          }
        })
        .catch(err => {
          this.resetLoading = false;
          alert(err.message);
        });
    },
    // 返回
    goback() {
      this.$router.replace(`/${this.enterpriseId}/setting/pay`);
    }
  }
};
</script>

<style lang="scss" scoped>
.resetpd-main {
  width: 90vw;
  margin: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  .button {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70vw;
    margin: 2rem auto;
    button {
      margin-bottom: 1rem;
      width: 100%;
    }
  }
  // .disabled .van-number-keyboard__sidebar .van-key--blue {
  //   background-color: #eaeaea !important;
  // }

  .div2 {
    text-align: center;
    .van-icon-checked {
      font-size: 2rem;
    }
    p {
      font-size: 0.4rem;
    }
    button {
      width: 90%;
    }
  }
}
::v-deep .disabled .van-number-keyboard__sidebar .van-key--blue {
  background-color: #eaeaea !important;
}
</style>
